<template>
	<div>
		<div class="box">
			<div class="title">
				<span class="tag"></span>
				加装
				<span class="price">合计：￥{{ format_thousand(price) }}</span>
			</div>
			<div class="">
				<el-form
					:model="formData"
					ref="form"
					:inline="false"
					label-width="5px"
					size="normal"
					:hide-required-asterisk="true">
					<el-table
						ref="multipleTable"
						:data="formData.attachedDecorationList"
						tooltip-effect="dark"
						style="width: 100%"
						:header-cell-class-name="setHeaderCellName">
						<el-table-column
							label="操作"
							width="100"
							align="center"
							v-if="state == 'write'">
							<template slot-scope="scope">
								<el-checkbox
									v-if="scope.row.operationType == '2'"
									v-model="scope.row.selectedType"
									@change="
										setSelectedType(scope.row, scope.$index)
									"
									true-label="1"
									false-label="2"></el-checkbox>
								<div v-else>
									<el-button
										type="text"
										@click="
											remove(scope.$index, scope.row)
										">
										删除
									</el-button>
								</div>
							</template>
						</el-table-column>
						<el-table-column label="装饰项" align="center">
							<template slot-scope="scope">
								<el-form-item
									v-if="state !== 'readonly'"
									style="margin: 0"
									label=" "
									:rule="[
										{
											required: true,
											message: '请输入装饰项',
											trigger: 'change',
										},
									]"
									:prop="`attachedDecorationList[${scope.$index}].decorationVal`">
									<el-select
										v-model="scope.row.decorationVal"
										clearable
										filterable
										allow-create
										@change="setData(scope.row)"
										size="mini">
										<el-option
											v-for="item in refittedList"
											:label="item.decorationName"
											:value="item.decorationName"
											:disabled="
												item.disabled
											"></el-option>
									</el-select>
								</el-form-item>
								<div v-else>
									{{
										scope.row.decorationVal
											| getVal(refittedList)
									}}
								</div>
							</template>
						</el-table-column>
						<TableCloumn
							v-for="item in tableCloumns"
							:cellOptions="item"
							:state="state"
							dataName="attachedDecorationList"></TableCloumn>
					</el-table>
				</el-form>

				<div class="btn" @click="add" v-if="state == 'write'">
					<i class="el-icon-plus"></i>
					<span>增加其他装饰项</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import TableCloumn from '@/views/finance/manage/tableColumn/index.vue';
	import FormItems from '@/views/finance/manage/formItems/index.vue';
	import ElInputNumber from '@/components/elcoms/el-input-number/index.vue';
	export default {
		components: { FormItems, TableCloumn, ElInputNumber },
		props: {
			value: {
				required: false,
			},
			state: {
				required: false,
			},
			type: {
				type: String,
				required: false,
			},
		},
		inject: ['details_forecast', '_index', '_refittedList'],
		data() {
			return {
				refittedList: [],
			};
		},
		watch: {
			$refittedList: {
				handler(val) {
					if (this.notEmpty(val)) {
						this.refittedList = this._.cloneDeep(val);
						this.setDisabled();
					}
				},
				deep: true,
				immediate: true,
			},
			price: {
				handler(val) {
					this.formData.attachedDecorationAmount = val;
				},
				immediate: true,
			},
		},
		computed: {
			details() {
				return this.details_forecast();
			},
			index() {
				return this._index();
			},
			$refittedList() {
				return this._refittedList();
			},
			formData: {
				get() {
					return this.useVModel.call(this);
					// return this.value;
				},
				set(val) {
					this.$emit('input', val);
				},
			},
			price() {
				let money = 0;
				this.formData?.attachedDecorationList?.map(item => {
					if (item.decorationCount && item.decorationPrice) {
						let itemMoney = this.numberRide(
							item.decorationCount * 1,
							item.decorationPrice,
						);
						if (Number.isFinite(itemMoney)) {
							money = this.numberAdd(money, itemMoney);
						}
					}
				});
				return money;
			},
			tableCloumns() {
				return [
					{
						label: '数量',
						type: (row, index) => {
							let type = 'text';
							if (
								this.formData?.attachedDecorationList?.[index]
									?.selectedType == '1'
							) {
								type = 'input_number';
							} else {
								type = 'text';
							}
							return type;
						},
						// type: "input_number",
						min: 1,
						prop: 'decorationCount',
						rules: true,
						// formitemPrototype: {
						//     style: {
						//         marginTop: "23px",
						//     },
						// },
					},
					{
						label: '装饰单项费',
						prop: 'decorationPrice',

						type: (row, index) => {
							let type = 'text';
							if (
								this.formData?.attachedDecorationList?.[index]
									?.operationType == '2'
							) {
								type = 'text';
							} else {
								type = 'input_number';
							}
							return type;
						},

						rules: true,
						tag: 'price',
						min: 0,
						prototype: {
							step: 0.01,
							stepStrictly: true,
						},
					},

					{
						label: '说明',
						type: 'textarea',
						prop: 'remark',
						minRows: 1,
						maxRows: 1,
					},
				];
			},
		},
		created() {
			this.setDisabled();
		},
		mounted() {
			this.$emitter.on('setDisabledRefitted', this.setDisabled);
		},
		beforeDestroy() {
			if (this.notEmpty(this.details?.productList?.[this.index])) {
				this.formData.attachedDecorationList = null;
				Reflect.deleteProperty(this.formData, 'attachedDecorationList');
			}
		},
		filters: {
			getVal(val, list) {
				let item = list.find(e => e?.decorationName == val);
				if (item) {
					return item?.decorationName ?? '-';
				} else {
					return val;
				}
			},
		},

		methods: {
			setData(row) {
				let e = this.refittedList.find(
					e => e.decorationName == row.decorationVal,
				);
				if (e) {
					row.decorationPrice = e.decorationFee;
				}
				this.setDisabled();
			},
			setDisabled(row) {
				this.$nextTick(() => {
					this.refittedList?.map((item, i) => {
						this.$set(item, 'disabled', false);
						let child = this.formData?.attachedDecorationList?.find(
							e => {
								return e.decorationVal == item.decorationName;
							},
						);
						if (child && item.decorationName !== '其他') {
							this.$set(item, 'disabled', true);
						}
					});
				});
			},
			setHeaderCellName({ row, column, rowIndex, columnIndex }) {
				if (this.state == 'readonly') {
					return '';
				}
				if (
					columnIndex !== 0 &&
					columnIndex !== 4 &&
					columnIndex !== undefined
				) {
					return 'ruleHeaderCell';
				}
			},
			setSelectedType(row, index) {
				if (row.selectedType == '2') {
					this.$set(
						this.formData.attachedDecorationList[index],
						'decorationCount',
						0,
					);
				} else {
					this.$set(
						this.formData.attachedDecorationList[index],
						'decorationCount',
						1,
					);
				}
			},
			valid() {
				return new Promise(async resolve => {
					let result = true;
					let refs = Object.values(this.$refs);
					for (let index = 0; index < refs?.length; index++) {
						const ref = refs[index];
						if (
							Object.prototype.toString.call(ref) ==
							'[object Array]'
						) {
							for (let i = 0; i < ref.length; i++) {
								const element = ref[i];
								if (element?.valid) {
									let rc = await element?.valid?.();
									result = result && rc;
								}
								if (element?.validate) {
									let rf = await this._valid(ref);
									result = result && rf;
								}
								if (element?.form_validate) {
									let rf = await this._valid(
										ref,
										'form_validate',
									);
									result = result && rf;
								}
							}
						} else {
							if (ref?.valid) {
								let rc = await ref?.valid?.();
								result = result && rc;
							}
							if (ref?.validate) {
								let rf = await this._valid(ref);
								result = result && rf;
							}
							if (ref?.form_validate) {
								let rf = await this._valid(
									ref,
									'form_validate',
								);
								result = result && rf;
							}
						}
					}

					resolve(result);
				});
			},
			remove(index, row) {
				this.$confirm(
					`此操作将删除 ${
						row?.decorationVal
							? row?.decorationVal + '加装项'
							: '该加装项'
					}, 是否继续?`,
					'提示',
					{
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning',
					},
				)
					.then(() => {
						this.formData?.attachedDecorationList?.splice(index, 1);
						this.setDisabled();
					})
					.catch(() => {});
			},
			add() {
				this.formData.attachedDecorationList.push({
					selectedType: '1', // 是否选中
					operationType: '1', // 是否新增
					decorationCount: undefined, // 数量
					decorationPrice: undefined, // 单项费
					decorationVal: '',
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.box {
		border-radius: 8px;
		background-color: #fff;
		.title {
			font-size: 14px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 22px;
			padding-bottom: 15px;
			// border-bottom: 1px solid #e9e9e9;
			display: flex;
			align-items: center;
			.tag {
				width: 8px;
				height: 8px;
				background-color: #1890ff;
				border-radius: 100%;
				margin-right: 10px;
			}
			.price {
				font-size: 14px;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #1890ff;
				line-height: 20px;
				margin-left: 20px;
			}
		}
	}
	::v-deep .el-input-number {
		width: 100%;
		.el-input-number__decrease,
		.el-input-number__increase {
			display: none;
		}
		input {
			width: 100%;
			padding: 5px;
			text-align: left;
		}
	}
	.btn {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 48px;
		background: #ffffff;
		border-radius: 4px;
		border: 1px solid #dadada;
		color: #1890ff;
		margin-top: 15px;
		font-size: 14px;
		cursor: pointer;
	}
</style>
